<template>
  <div class="AfterSale">
    <div class="header">
      <p>
        <span class="text1">订单ID:</span
        ><el-input
          v-model="searchValue.orderId"
          style="width: 200px"
          placeholder="请输入订单号"
        />
      </p>
      <p>
        <span class="text1">自提点:</span
        ><el-input
          v-model="searchValue.tname"
          style="width: 200px"
          placeholder="请输入自提点名称"
        />
      </p>

      <p style="width: 26%">
        <span class="text1">用户:</span
        ><el-input
          v-model="searchValue.name"
          style="width: 200px"
          placeholder="请输入下单人姓名"
        />
      </p>
      <p>
        <span class="text1">自提点类型:</span>
        <el-select
          v-model="searchValue.tcate"
          placeholder="请选择自提点类型"
          style="width: 200px"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="(item, idx) in [
              '快递驿站',
              '便利店',
              '杂货店',
              '水果店',
              '其他',
            ]"
            :key="item"
            :label="item"
            :value="idx + 1"
          />
        </el-select>
      </p>
      <p>
        <span class="text1">售后类型:</span>
        <el-select
          v-model="searchValue.cate"
          placeholder="请选择售后类型"
          style="width: 200px"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="(item, idx) in ['未收到货', '少件/漏件']"
            :key="item"
            :label="item"
            :value="idx + 1"
          />
        </el-select>
      </p>
      <p style="width: 100%;">
        <span class="text1"></span>
        <el-button @click="getlist">查询</el-button>
        <el-button>重置</el-button>
      </p>
    </div>
    <div class="table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="orderId" label="订单号" />
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="tname" label="自提点名称"  />
        <el-table-column label="售后类型">
          <template #default="scope">
            {{ scope.row.cate == 1 ? "未收到货" : "少件/漏件"}}
          </template>
        </el-table-column>
        <el-table-column label="自提点类型">
          <template #default="scope">
            {{ scope.row.tcate == 1 ? "菜鸟驿站" : ""}}
            {{ scope.row.tcate == 2 ? "便利店" : ""}}
            {{ scope.row.tcate == 3 ? "杂货店" : ""}}
            {{ scope.row.tcate == 4 ? "水果店" : ""}}
            {{ scope.row.tcate == 5 ? "其他" : ""}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="currentPage"
        style="padding-top: 20px"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>
  
<script setup>
import { getData } from "@/utils/way";
import { ref } from "vue";

let list = ref([]);
let page = ref(1);
let total = ref(-1);
let searchValue = ref({
  name: "",
  orderId: "",
  tname: "",
  cate: "",
  tcate: "",
});

let getlist = async ()=>{
  let {data} = await getData(`/szh/afterSale?page=${page.value}&name=${searchValue.value.name}&orderId=${searchValue.value.orderId}&tname=${searchValue.value.tname}&cate=${searchValue.value.cate}&tcate=${searchValue.value.tcate}`)
  if(data.code == 200){
    list.value = data.list;
    total.value = data.total;
  }
}
let currentPage = (val)=>{
  page.value = val;
  getlist();
}
onMounted(()=>{
  getlist();
})
</script>
<style>
.AfterSale {
  width: 100%;
  background-color: #fff;
  padding: 20px;
}
.AfterSale .header {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.header p {
  width: 25%;
  height: 50px;
  line-height: 50px;
}
.text1 {
  width: 100px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}
</style>
  